<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>注册</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>

<body>
  <div   id="body" v-cloak>
    <div   class="title">
      <!-- <img src="./static/happy_to_read.png" alt=""> -->
    </div>
    <div class="form">
      <group>
        <x-input v-model="name" :max='10' class="border-1px" placeholder="用户名" required>
            <span class="require" slot="label">*</span>
        </x-input>

        <x-input v-model="phone" :is-type="checkTel" type="tel" class="border-1px" placeholder="手机号码">
            <span class="require" slot="label">*</span>
        </x-input>


        <x-input v-model="code"  placeholder="请输入验证码" class="border-1px code" title="发送验证码" >
            <span class="require" slot="label">*</span>
          <x-button slot="right" type="primary" mini @click.native="countDown">{{codeMessage}}</x-button>
        </x-input>

        <datetime class="border-1px" v-model="birthDay" placeholder="孩子出生年月日" value-text-align="left">
            <!-- <span slot='title' class="require" >*</span> -->
        </datetime>

        <popup-picker class="border-1px" :columns="1" show-name :data="genderList" v-model="childGender"
        placeholder="孩子性别" value-text-align="left">
        <!-- <span slot='title' class="require" >*</span> -->
      </popup-picker>

        <!-- <x-input v-model="childLike" class="border-1px" placeholder="阅读偏好">
            <span class="require" slot="label">*</span>
        </x-input> -->

        <x-input v-model="password" :min="6" :max="12" :is-type="checkPW"  type="password" class="border-1px" placeholder="设置密码">
            <span class="require" slot="label">*</span>
        </x-input>

        <x-address class="border-1px address" title="地址" placeholder="地址" v-model="address" :list="addressData" value-text-align="left"  @on-hide='getSites' @on-shadow-change="getName">
            <template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
              <span slot='title'  class="require" >*</span>
              </span>
            </template>
        </x-address>

        <x-input v-model="detailAddress" class="border-1px" placeholder="详细地址">
            <!-- <span class="require" slot="label">*</span> -->
        </x-input>

        <popup-picker v-show='!siteslist.length==0' class="border-1px" :columns="1" :data="siteslist" v-model="sites" show-name
          placeholder="选择站点" value-text-align="left">
          <span slot='title' class="require" >*</span>
        </popup-picker>
      

        <!-- <p class="detail">注册成功后可获得
          <span class="strong">1</span>次免费借书机会，
          <span class="strong">3本1个</span>星期。
        </p> -->
        <div class="check">
          <check-icon :value.sync="isAgree"> 我同意 <a href="./terms.html">《五车图书服务协议》</a></check-icon>
        </div>

        <x-button type="primary"  :disabled='isDisabled' @click.native='getOpenId'>免费注册</x-button>
      </group>
    </div>
  </div>
</body>

</html>